<!-- 
  该组件，用于封装组合 n-data-table 与 n-pagination
 -->
<template>
  <n-space class="basic-table" vertical>
    <div class="basic-table__body">
      <n-data-table :columns="columns" :data="displayData"></n-data-table>
    </div>

    <div class="basic-table__footer">
      <!-- 
        当前的 page 数据，是父组件传递过来的一个 prop 数据，那么就不能通过 v-model:page 双向绑定给 分页组件

        <n-pagination v-model:page="page" :page-count="pageCount" />

        v-model:page => 展开形式
        :page
        @update:page
       -->

      <n-pagination :page="page" :page-count="pageCount" @update:page="onUpdatePage" />
    </div>
  </n-space>
</template>

<script>
export default {
  name: "basic-table",

  props: {
    // 表格列数据
    columns: { type: Array, required: true },
    // 表格行数据
    rows: { type: Array, required: true },
    // 当前页数
    page: { type: Number, default: 1 },
    // 每页显示的条数
    pageSize: { type: Number, default: 10 },
    // 总条数
    count: { type: Number, default: 10 },
  },

  emits: ['update:page'],

  computed: {
    // 总的页数 向上取整(总条数/每页显示条数)
    pageCount() {
      return Math.ceil(this.count / this.pageSize);
    },

    // 用于页面显示的data数据，实现分页的切割
    displayData() {
      // 第一页 this.rows.slice(0, 2)
      // 第二页 this.rows.slice(2, 4)
      // 第三页 this.rows.slice(4, 6)
      // 规律   this.rows.slice( (this.page - 1) * this.pageSize, this.pageSize * this.page )

      return this.rows.slice(
        (this.page - 1) * this.pageSize,
        this.page * this.pageSize
      );
    },
  },

  methods: {
    onUpdatePage(page) {
      console.log('Basic-Table  onUpdatePage', page)
      this.$emit('update:page', page)
    }
  }
};
</script>

<style lang="scss" scoped>
.basic-table {
  &__footer {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
